<template>
    <div class="cls1" ref="chartSC"></div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts'
  import { onMounted, ref } from 'vue'
  import request from '../axios/request'
  const chartSC = ref()
  
  function chartsInit(data) {
    var x = [];
    var y = [];
  
    for (var i = 0; i < data.length; i++) {
      x.push(data[i].tag);
      y.push(data[i].count);
    }
  
    var myChart = echarts.init(chartSC.value, 'Light');
  
    // 配置饼图的option
    var option = {
      title: {
        text: '标签占比', // 修改标题文本，更贴合饼图含义
        textStyle: {
          color: '#1784DB',
          fontSize: 20,
          textAlign: 'center'
        },
        left: 'center',
        top: '7%'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{b}: {d}%" // 修改提示框格式，显示名称和占比
      },
      grid: {
            left: '10%',
            right: '10%',
            bottom: '20%',
            top: '10%',
            containLabel: true,
            width: '80%', /* 增大grid的width属性值，可根据实际情况调整占比 */
            height: '75%' /* 增大grid的height属性值，可根据实际情况调整占比 */
        },

      series: [
        {
          name: '地区销量占比',
          type: 'pie',
          radius: '50%',
          center: ['50%', '50%'], // 设置饼图在容器中的位置为中心
          data: y.map((value, index) => ({ value, name: x[index] })), // 将获取到的数据整理成饼图所需格式
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
  
    option && myChart.setOption(option);
  }
  
  // 组件挂载成功
  onMounted(function () {
    // 发起axios异步请求，获取数据
    request({
      url: '/minsu-api/queryAlltagnum',  // 配置的代理请求会拦截
      method: 'get'
    }).then(res => {
      console.log(res.data);
      chartsInit(res.data.data)
    }).catch((error) =>
      console.log(error))
  })
  </script>
  
  <style scoped>
  .cls1 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  </style>